 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>产品销量排行</title>
	<link href="../../rs/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="../../rs/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="../../rs/plugins/bootstrap_tab/css/bootstrap-table.css" rel="stylesheet">
	<link href="../../rs/css/animate.min.css" rel="stylesheet">
	<link href="../../rs/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="../../rs/plugins/datapicker/datepicker3.css" rel="stylesheet">
	<?php
  		require_once('login.php');
 	?>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

	<div class="ibox float-e-margins">
		<div class="ibox-content">
			<div class="col-sm-4">
				<div   id="data_5">
					<div class="input-daterange input-group" id="datepicker">
						<input style="height:34px" type="text" class="input-sm form-control" name="start" value="" id="start" />
						<span style="background: #E5E6E7;" class="input-group-addon">到</span>
						<input style="height:34px" type="text" class="input-sm form-control" name="end" value=""  id="end"/>
					</div>
				</div>
			</div>

			<div   class="input-group" style="float: right; margin-right: 10px;width:50px">
				<div class="input-group-btn">
					<button type="button" class="btn " onclick="f_search()" style="margin-left: 8px;
		border-radius:0px;">
						执行
					</button>
				</div>
			</div>
			<div style="clear:both"></div>
		</div>
		<div class="ibox-content">
			<div class="row row-lg">
				<div class="col-sm-4">

					<div class="example">
						<table id="table1" data-toggle="table"   data-height="600" data-mobile-responsive="true" data-show-footer="true">
							<thead>
							<tr>
								<th data-field="name" data-footer-formatter="nameFormatter1">店铺名称</th>
								<th data-field="y" data-sortable="true" data-footer-formatter="yFormatter1">数量</th>
								<th data-field="y2" data-sortable="true"  data-footer-formatter="yFormatter2">金额</th>
							</tr>
							</thead>
						</table>
					</div>
				</div>

				<div class="col-sm-8">
					<div data-options="region:'center'">
						<div id="containerliuliang1" style="min-width: 368px; margin: 0 auto"></div>

					</div>
					<div data-options="region:'center'">
						<div id="containerliuliang2" style="min-width: 368px; margin: 0 auto"></div>

					</div>
				</div>
			</div>

		</div>

	</div>
	<!-- End Panel Basic -->

</div>
<script src="../../rs/js/jquery.min.js"></script>
<script src="../../rs/js/bootstrap.js"></script>
<script src="../../rs/plugins/bootstrap_tab/js/bootstrap-table.min.js"></script>
<script src="../../rs/plugins/bootstrap_tab/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../rs/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="../../rs/js/jquery.cookie.js"></script>
<script src="../../rs/js/common_qj.js"></script>
<script src="../../rs/plugins/layer/layer.min.js"></script>
<script src="../../rs/plugins/highchart/highcharts.js"></script>
<script src="../../rs/plugins/highchart/exporting.js"></script>
<script>



	var sign = URLencode($.cookie('sign'));
	var showfootdata1;
	var showfootdata2;
	//    日期插件js开始
	$("#data_5 .input-daterange").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
	var config = {
		".chosen-select": {},
		".chosen-select-deselect": {allow_single_deselect: !0},
		".chosen-select-no-single": {disable_search_threshold: 10},
		".chosen-select-no-results": {no_results_text: "Oops, nothing found!"},
		".chosen-select-width": {width: "95%"}
	};
	//    日期插件js结束
	$(function(){
		if(sign==="undefined"){
			window.location.href = "login.html";
		}
		if ((new Date()).format('dd')==01)
		{var start1=(new Date()).format('dd');
		}else{
			var start1=(new Date()).format('dd')-1;
		}
		var start1=start1.toString();
		if (start1.length == 1) {
			start1 = '0' + start1;
		}

		var start=(new Date()).format('yyyy-MM-'+start1);
		var end=(new Date()).format( 'yyyy-MM-dd');
		$('#start').val(start);
		$('#end').val(end);

	});
	//判断用户权限&加载数据


</script>

<script type="text/javascript">
	function f_search(){
		var rq1=$('#start').val();
		var rq2=$('#end').val();
		var options={
			chart: {
				renderTo: 'containerliuliang1', //图表放入的容器ID
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false
			},
			credits: {
				enabled: false,
			},
			title: {
				text: ''
			},
			tooltip: {
				pointFormat: '{series.name}: <b>( {point.y} ) </b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
						},
						connectorColor: '#000000',
						format: '<b>{point.name}</b>: ( {point.y} )'
					}
				}
			},
			xAxis: {
				categories: [

				],
				crosshair: true,
				labels: {
					rotation: -45,
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
			},
			series: [{
				type: 'column',
				name: '订单数量',
				data: [ ]
			}]
		};
		//获取数据
		$.ajax({
			type: "post",
			url:G_url+'repocharts/prbb'+'?sign='+sign,
   			data:"rq1="+rq1+"&rq2="+rq2,
			dataType: "json",
			success: function (data){
				showfootdata1=data.data1_total;
				showfootdata2=data.data2_total;

				//柱状图1
				$('#table1').bootstrapTable('load', data.data1);
				options.title.text = rq1+' ~ '+rq2+'数量前20个产品数量排行(单位:个)';
				options.series[0].data =data.data20.dt1;
				options.xAxis.categories =data.data20.cate;
				var chart = new Highcharts.Chart(options); //用前面定义的参数构造一个图表，会自动填充到页面容器中。

				//柱状图2

				options.title.text = rq1+' ~ '+rq2+' 销售额前20个产品数量排行(单位:元)';
				options.chart.renderTo = 'containerliuliang2';
				options.series[0].data =data.data20.dt2;
				options.series[0].name ='销售金额';
				options.xAxis.categories =data.data20.cate;
				var chart2 = new Highcharts.Chart(options); //用前面定义的参数构造一个图表，会自动填充到页面容器中。
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
			}
		});
	}




	//表格1
	//footer的数据写入
	function yFormatter1(){
		return showfootdata1 +"个";
	}
	function yFormatter2(){
		return showfootdata2 +"元";
	}
	//footer的名称
	function nameFormatter1(){
		return "总计:";
	}



</script>
</body>
</html>
